<template>
  <el-card class="form-container" shadow="never">
    <el-form :model="orderSetting" ref="orderSettingForm" :rules="rules" label-width="auto">
      <el-form-item label="秒杀订单超过：" prop="flashOrderOvertime">
        <el-input v-model="orderSetting.flashOrderOvertime">
          <template #append>分未付款，订单自动关闭</template>
        </el-input>
      </el-form-item>
      <el-form-item label="正常订单超过：" prop="normalOrderOvertime">
        <el-input v-model="orderSetting.normalOrderOvertime">
          <template #append>分未付款，订单自动关闭</template>
        </el-input>
      </el-form-item>
      <el-form-item label="发货超过：" prop="confirmOvertime">
        <el-input v-model="orderSetting.confirmOvertime">
          <template #append>天未收货，订单自动完成</template>
        </el-input>
      </el-form-item>
      <el-form-item label="订单完成超过：" prop="finishOvertime">
        <el-input v-model="orderSetting.finishOvertime">
          <template #append>天自动结束交易，不能申请售后</template>
        </el-input>
      </el-form-item>
      <el-form-item label="订单完成超过：" prop="commentOvertime">
        <el-input v-model="orderSetting.commentOvertime">
          <template #append>天自动五星好评</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="confirm" type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { getOrderSetting, updateOrderSetting } from '@/api/orderSetting'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import type { OrderSettingParams } from '@/models/orderSetting'

defineOptions({ name: 'OrderSetting' })
const checkTime = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('时间不能为空'))
  }
  let intValue = parseInt(value)
  if (!Number.isInteger(intValue)) {
    return callback(new Error('请输入数字值'))
  }
  callback()
}
const rules = {
  flashOrderOvertime: { validator: checkTime, trigger: 'blur' },
  normalOrderOvertime: { validator: checkTime, trigger: 'blur' },
  confirmOvertime: { validator: checkTime, trigger: 'blur' },
  finishOvertime: { validator: checkTime, trigger: 'blur' },
  commentOvertime: { validator: checkTime, trigger: 'blur' },
}

const orderSettingForm = ref<FormInstance>()
const orderSetting = ref<OrderSettingParams>({})

getDetail()
async function confirm() {
  if (!orderSettingForm.value) return false
  await orderSettingForm.value.validate()
  await ElMessageBox.confirm('是否要提交修改?', '提示', { type: 'warning' })
  await updateOrderSetting(orderSetting.value)
  ElMessage.success('提交成功')
}
async function getDetail() {
  const response = await getOrderSetting(1)
  orderSetting.value = response.data.data || { id: 1 }
}
</script>
<style scoped>
.input-width {
  width: 50%;
}

.note-margin {
  margin-left: 15px;
}
</style>
